<template>
  <div class="content">
    <Crud :tbColumns="tbColumns" ref="crud" title="采集单元" :baseUrl="baseUrl" :refreshUrl="refreshUrl" :toolbarHidden="toolbarHidden"
      @editChange="onEditChange">
      <template slot="slotEX_impl_alert" slot-scope="{text, record}">
        <a-button size="small" icon="fa fa-bell-o" class="actionBtn" @click="onAlarmActionClick(record)" title="采集器温度告警设置" />
      </template>
      <template slot="slotEX_impl_hexAddr" slot-scope="{record}">
        {{`${record.addr}(${record.hexAddr})`}}
      </template>

      <template slot="formItems" slot-scope="{record}">
        <a-row :gutter="24">
          <a-col :span="12" v-if="isEdit">
            <a-form-item label="编号" v-bind="formItemLayout">
              <a-input-number :disabled="isEdit" placeholder="请输入编号" @change="(val)=>record['id'] = val" style="width:100%"
                v-decorator="['id', {initialValue: record.id, rules: [{ required: true, type: 'integer', message: '编号为整数'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="名称" v-bind="formItemLayout">
              <a-input placeholder="请输入名称" @change="(val)=>record['name'] = val.target.value"
                v-decorator="['name', {initialValue: record.name, rules: [{ required: true,  message: '名称不能为空', whitespace: false}]}]" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="线路/变电站" v-bind="formItemLayout">
              <a-tree-select placeholder="只能选择线路或变电站" :loadData="onLoadData" :treeData="treeData"
                :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }"
                @change="(value, label)=>record['container'] = {id : value, name : label[0] }"
                v-decorator="['container', {initialValue: getValueOfObj(record.container), rules: [{ required: true,  message: '所属组织不能为空', whitespace: false}]}]">
              </a-tree-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="电压等级" v-bind="formItemLayout">
              <a-select style="width: 100%" showSearch placeholder="请选择电压等级"
                @change="(val)=>record.baseVoltage = baseVoltageList.find(v => v.id === val)"
                v-decorator="['baseVoltage', {initialValue: getValueOfObj(record.baseVoltage) }]">
                <a-select-option v-for="item in baseVoltageList" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item v-bind="formItemLayout" style="padding-top: 30px;">
              <a-checkbox v-decorator="['disable', {initialValue: record.disable }]" @change="(e)=>record['disable'] = e.target.checked">禁用
              </a-checkbox>
            </a-form-item>
          </a-col>
        </a-row>

      </template>
    </Crud>
  </div>

</template>

<script>
import Crud from '@/components/container/Crud';
import CrudMixin from '@/components/container/CrudMixin.js';
import treeApi from '@/api/tree';

export default {
  name: 'collectorCrud',
  components: { Crud },
  mixins: [CrudMixin],
  props: {
    toolbarHidden: { type: Boolean, default: false }
  },

  data() {
    return {
      refreshUrl: '{clz}/{id}/collectors',
      baseUrl: 'bay/',
      tbColumns: [
        { title: '告警', dataIndex: 'alert', fixed: 'left', width: 60, scopedSlots: { customRender: 'slotEX_alert' } },
        { title: '编号', dataIndex: 'id', fixed: 'left', width: 90 },
        { title: '名称', dataIndex: 'name', fixed: 'left', width: 180 },
        { title: '停用', dataIndex: 'disable', scopedSlots: { customRender: 'disable' }, width: 55 },
        { title: '序号', dataIndex: 'lru', width: 60 },
        { title: '地址', dataIndex: 'hexAddr', scopedSlots: { customRender: 'slotEX_hexAddr' }, width: 120 },
        { title: '采集器类型', dataIndex: 'type', width: 120 },
        { title: '属部' }
      ],
      treeData: [],
      formRules: {},
      collectorTypeList: Object.keys(this.$enum.CollectorType).map(key => this.$enum.CollectorType[key])
    };
  },

  mounted() {
    this.treeLoad();
  },

  methods: {
    treeLoad() {
      treeApi.loadTreeByRoot('/psr').then(res => {
        this.treeData = this.$utils.disabledByClzNotIn(this.insertIconAndValue(res.data), ['line', 'substation']);
      });
    },
    onLoadData(treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        let data = treeNode.dataRef;
        let params = { id: data.id, level: data.clz };
        treeApi.loadTreeByParent('/psr', params).then(res => {
          let childrenNodes = this.insertIconAndValue(res.data);
          treeNode.dataRef.children = this.$utils.disabledByClzNotIn(childrenNodes, ['line', 'substation']);
          this.treeData = [...this.treeData];
          resolve();
        });
      });
    },
    onAlarmActionClick(text, tbRecord) {
      debugger;
      this.$message.warning('正在开发中...');
    },
    onAddCollectorActionClick(tbRecord) {
      this.$message.warning('正在开发中...');
    }
  }
};
</script>

<style lang="less" scoped>
a {
  vertical-align: middle;
}
</style>
